<template>
    <div class="listOne">
        <h2>ListOne 显示</h2>
        <ul>
            <li v-for="list in newLists">
                <span class="name">{{ list.name }}</span>
                <span class="price"> ${{ list.price }}</span>
            </li>
        </ul>
        <button @click="reducePrice()">商品降价</button>
        需要降价: <input type="number" v-model="amount" placeholder="请输入需要降价的价格" min="0">
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {mapActions} from 'vuex';

    export default {
        name: 'listone',
        data() {
            return {
                amount: 0,
            }
        },
        // props: {
        //     lists: Array
        // }
        computed: {
            lists() {
                return this.$store.state.lists; // 原始数据
            },
            /*newLists() {
                return this.$store.getters.newLists; // getters 数据
            }*/

            // ...是es6的写法，需要babel来支持   cnpm install babel-preset-stage-2 --save-dev

            ...mapGetters(['newLists'])
        },
        methods: {
            /*reducePrice() { // 假设自定以传递数量
                
               // 常规不需要mutations的写法
               // this.$store.state.lists.forEach(list => {
               //    list.price -= 1;
               // })

                
                // 使用vuex 
                // this.$store.commit('reducePrice'); // 这里的参数就是你的mutations的方法
                

                this.$store.dispatch('reducePriceA', this.amount);
                // 这里调用的就是actions 的方法reducePriceA， 第二个是传递的参数,对应的是我们的payload
            }*/

            // 若我们需要调用多个的actions，可以采用
            ...mapActions(["reducePrice"]) // 这里为了统一名字保持一致

        }
    }
</script>

<style scoped="">
    .listOne {
        background: #FFF8B1;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        margin-bottom: 30px;
        padding: 10px 20px;
    }
    .listOne li{
        display: inline-block;
        margin-right: 10px;
        margin-top: 10px;
        padding: 20px;
        background: rgba(255,255,255,0.7);
    }
    .price{
        font-weight: bold;
        color: #E8800C;
    }
</style>